<template>
  <div>
    <div id="react-body">
      <section class="purchase">
        <!--课程信息-->
        <div class="purchase-detail purchase-item">
          <p class="purchase-detail-title">课程信息确认</p>
          <img class="purchase-detail-cover"
               src="https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLBBfNiahxog0iaV4KFPcBcpVz7dEk8JA5ymROav7icXyWjR0ibFdDnIOhacRiagzVRic1Bzs/"
               alt="Java零基础后端开发工程师">
          <div class="purchase-detail-content">
            <h1 class="purchase-detail-name" title="Java零基础后端开发工程师">
              Java零基础后端开发工程师
            </h1>
            <a class="purchase-detail-agency" target="_blank">图云教育</a>
            <p class="purchase-detail-price">¥8980.00<span>课前随时退</span></p>
            <div class="purchase-detail-term">
              <h2 class="purchase-detail-term--title">
                Java零基础
              </h2>
              <p>随到随学 至 2026-10-14</p></div>
          </div>
        </div>
        <!--手机提醒-->
        <div class="purchase-item purchase-mobile">
          <p class="purchase-detail-title">购买人信息</p>
          <div>
            <el-descriptions class="margin-top" :column="1" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                关于白络
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                18100000000
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline"></i>
                  居住地
                </template>
                苏州市
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  备注
                </template>
                <el-tag size="small">学生</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building"></i>
                  联系地址
                </template>
                江苏省苏州市吴中区吴中大道 1188 号
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <!--购买选项-->
        <div class="purchase-price purchase-item">
          <p class="purchase-detail-title">支付方式</p>
          <div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <el-form-item label="平台优惠">
                <el-select v-model="value" disabled placeholder="无优惠卷，无法选择">
                  <el-option
                    v-for="item in 4"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="支付方式">
                <el-checkbox-group v-model="checkPayWay">
                  <el-checkbox-button v-for="payWay in payWays" :label="payWay" :key="payWay">{{payWay}}
                  </el-checkbox-button>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <section class="purchase-bottom purchase-item"><p class="purchase-bottom-title">需支付金额</p>
          <div class="purchase-bottom-content">
            <div class="purchase-bottom-rows"><p class="purchase-bottom-label">课程价格</p>
              <p class="purchase-bottom-right">¥8980.00</p></div>
            <div class="purchase-bottom-rows"><p class="purchase-bottom-label">应付金额</p>
              <p class="purchase-bottom-right">¥8980.00</p></div>
          </div>
          <p class="f-checkbox checked">
            <el-checkbox-group v-model="checkedDeal">
              <el-checkbox label="图云教育服务协议" key="图云教育服务协议" value="图云教育服务协议">
                同意&nbsp;<a href="">《图云教育服务协议》</a>
              </el-checkbox>
            </el-checkbox-group>
          </p>
          <button class="im-btn purchase-bottom-btn btn-default btn-m" @click="enterPrise">去付款</button>
        </section>
      </section>
    </div>
  </div>
</template>

<script>
  const payWayList = ['微信支付']
  export default {
    name: 'purchase',
    data () {
      return {
        checkPayWay: ['微信支付'],
        checkedDeal: [],
        payWays: payWayList,
        labelPosition: 'right',
        value: '',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        }
      }
    },
    mounted () {
      document.querySelector('body').setAttribute('style', 'background-color: rgb(242, 242, 242)')
    },
    methods: {
      enterPrise () {
        if (this.checkPayWay.length === 0){
          this.$notify({
            title: '警告',
            message: '请选择一种支付方式',
            type: 'warning'
          })
          return
        }
        if (this.checkedDeal.length === 0) {
          this.$notify({
            title: '警告',
            message: '需要勾选同意《图云教育服务协议》',
            type: 'warning'
          })
          return
        }
        if (this.checkedDeal.length === 1 && this.checkedDeal[0] === '图云教育服务协议' && this.checkPayWay.length!==0) {
          this.$router.push({
            path: '/enterprise',
            query: {
              'classId': 1,
              'price': 1
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #2d2d2d !important;
  }

  a {
    background: transparent;
    -webkit-text-decoration-skip: objects;
    text-decoration: none;
    color: #23b8ff;
  }

  .im-btn.btn-default, .im-btn.btn-outline, .im-btn.btn-primary, .im-btn.btn-weak {
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .purchase-bottom-btn {
    position: absolute;
    bottom: 30px;
    right: 20px;
  }

  .im-btn.btn-m {
    font-size: 16px;
    line-height: 40px;
    min-width: 120px;
    width: auto;
    padding: 0 1em;
  }

  .im-btn.btn-default {
    background-color: #188eee;
    color: #fff;
  }

  .purchase-bottom-right {
    margin-left: 85px;
  }

  .purchase-bottom-label {
    float: left;
    width: 85px;
    text-align: left;
  }

  .purchase-bottom-rows {
    margin-bottom: 10px;
    min-height: 30px;
    line-height: 30px;
  }

  .purchase-bottom-content {
    margin-bottom: 30px;
  }

  .purchase-bottom-title {
    margin-bottom: 20px;
    font-size: 16px;
    color: #000;
  }

  .purchase-bottom {
    position: relative;
  }

  blockquote, figure, form, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }

  .purchase {
    position: relative;
    margin: 20px auto 30px;
    padding: 0 20px;
    width: 1200px;
    background-color: #fff;
  }

  .purchase-item {
    padding: 30px 0;
    border-bottom: 1px solid #eee;
  }

  .purchase-detail {
    height: 240px;
  }

  * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .purchase-detail-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
  }

  .purchase-detail-cover {
    float: left;
    width: 280px;
    height: 156px;
  }

  img {
    border: 0;
    vertical-align: middle;
    max-width: 100%;
  }

  .purchase-detail-content {
    float: left;
    margin-left: 30px;
    width: 850px;
  }

  .purchase-detail-agency, .purchase-detail-name {
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }

  .purchase-detail-name {
    font-size: 22px;
  }

  .purchase-detail-agency {
    display: inline-block;
    font-size: 14px;
    color: #999;
  }

  .purchase-detail-agency, .purchase-detail-name {
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }

  .purchase-detail-price {
    margin-top: 5px;
    font-size: 16px;
    color: #ff0042;
    line-height: 24px;
  }

  .purchase-detail-price span {
    position: relative;
    margin-left: 20px;
  }

  .purchase-detail-price span::before {
    position: absolute;
    left: -10px;
    content: "·";
    font-size: 30px;
    line-height: 18px;
  }

  .purchase-detail-term {
    position: relative;
    margin-top: 20px;
    padding: 5px 15px 6px;
    border: 1px solid #ddd;
    line-height: 2.5;
  }

  .purchase-detail-term--title {
    position: absolute;
    padding: 0 5px;
    top: -20px;
    line-height: 35px;
    font-size: 16px;
    background-color: #fff;
  }


</style>
